<template>
  <div class="lyric">
    <div v-if="lyric.length" class="lyric_layer">
      <!-- 封面 -->
      <div class="left">
        <Ltavatar
          class="avatar"
          size="250"
          shape="circle"
          :src="playStore.currentAudio.picUrl"
          :class="avatarAnimation"
          @click="changeAvatarHandler"
        ></Ltavatar>
        <span class="name">{{ playStore.currentAudio.name }}</span>
        <span class="sub_name name">{{ playStore.currentAudio.songNmae }}</span>
      </div>
      <!-- 歌词 -->
      <div class="right">
        <ul
          ref="ulRef"
          @mouseenter="pauseLyricScroll = true"
          @mouseleave="pauseLyricScroll = false"
        >
          <li
            v-for="(item, index) in newLyric"
            :key="index"
            ref="lisRef"
            :class="{ active: item.active }"
            @click="changeAudioTimeHandler(item.time)"
          >
            <span>{{ item.text }}</span>
            <palyStar v-if="item.text" class="play_star"></palyStar>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType, ref, useTemplateRef, watch } from 'vue'

import Ltavatar from '@renderer/base-ui/lt-avatar/index.vue'
import palyStar from '@renderer/base-ui/lt-icon/paly-star.vue'

import usePlay from '@renderer/pinia/modules/play'

const playStore = usePlay()

const props = defineProps({
  lyric: {
    type: Array as PropType<{ time: number; text: string; active: boolean }[]>,
    default: () => []
  }
})

// 监听播放状态的变化
const avatarAnimation = ref('') // 头像是否旋转
watch(
  () => playStore.playStatus,
  (newVal) => {
    if (newVal) {
      avatarAnimation.value = ''
    } else {
      avatarAnimation.value = 'pauseAmition'
    }
    console.log(avatarAnimation.value)
  },
  { immediate: true }
)

// 点击头像播放音乐
const changeAvatarHandler = () => {
  playStore.setAvatarPlay()
}

// 歌词的变化
const pauseLyricScroll = ref(false) // 是否暂停歌词滚动
const ulRef = useTemplateRef<HTMLUListElement>('ulRef')
const lisRef = useTemplateRef<HTMLLIElement>('lisRef')
const newLyric = ref(props.lyric)
const changeLyricHandler = (time: number) => {
  const index = newLyric.value.findIndex((item, index) => {
    return time >= item.time && time < newLyric.value[index + 1].time
  })
  newLyric.value.forEach((item) => {
    item.active = false
  })
  newLyric.value[index].active = true
  if (ulRef.value && lisRef.value && !pauseLyricScroll.value) {
    const top = lisRef.value[index].offsetTop - 250
    ulRef.value.scrollTop = top
  }
}

const emit = defineEmits(['changeAudioTime'])
// 改变音乐播放时间
const changeAudioTimeHandler = (time: number) => {
  emit('changeAudioTime', time)
}

defineExpose({
  changeLyricHandler
})
</script>

<style scoped lang="scss">
.lyric {
  width: 100%;
  height: 90%;
  .lyric_layer {
    width: 100%;
    height: 90%;
    display: flex;
    overflow: hidden;

    .left {
      flex: 1.2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .avatar {
        animation: rotate 18s linear infinite;
      }

      .pauseAmition {
        animation-play-state: paused;
      }

      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      .name {
        margin-top: 10px;
        font-size: 20px;
        cursor: pointer;
      }
      .sub_name {
        color: #999;
        margin-top: 10px;
        font-size: 16px;
        cursor: pointer;
      }
    }

    .right {
      flex: 2;
      display: flex;
      justify-content: center;
      ul {
        height: 80%;
        overflow: auto;
        li {
          color: #999;
          line-height: 30px;
          text-align: center;
          transition: all 0.3s;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;

          .play_star {
            margin-left: 10px;
            opacity: 0;
            transition: all 0.3s;
          }

          &:hover .play_star {
            opacity: 1;
          }
        }
        .active {
          color: #fff;
          font-size: 25px;
        }
        /* 隐藏滚动条 */
        &::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
}
</style>
